<template>
  <div class='offer'>

    <div v-if='groupingData&&groupingData.length'>
      <div class='content'>
        <table v-for='item in groupingData'
               :key='item.title.KH_ID'>
          <div class='card-num'>
            <div>客户卡号 : [{{item.title.KH_bianHao}}] {{item.title.KHLeiXing}}</div>
            <div @click='goBZGoods(item)'>
              去选择标准商品
              <i class='iconfont icon-qianjin '></i>
            </div>
          </div>
          <thead class='thead'>
            <tr @click="selectCheck(item,'-1')">
              <th class='check'>
                <div>
                  <icon :type="item.isSelect?'success_no_circle':''"
                        :size="store.check.size"
                        :color="store.check.color" />
                </div>
              </th>
              <th>商品名称</th>
              <th>报价(元)</th>

            </tr>
          </thead>
          <tbody>
            <tr v-for='(items,indexs) in item.arr'
                :key='indexs'
                @click='selectCheck(item,items)'
                v-if='items.HuoHao&&items.SPMingcheng'>
              <td class='check'>
                <div>
                  <icon :type="items.isSelect?'success_no_circle':''"
                        :size="store.check.size"
                        :color="store.check.color" />
                </div>
              </td>
              <td>
                <div> {{items.HuoHao}}</div>
                <div> {{items.SPMingcheng}}</div>
              </td>
              <td>{{items.BJ_price}}</td>
            </tr>
          </tbody>
          <div class='explain'>
            报价=货款+物流费+平台费+品牌费
          </div>
        </table>
      </div>
      <div class="to-buy">
        <div @click="goShoppingCart"
             :class="[isDisable?'disable':'']">
          选择订购
        </div>

      </div>

    </div>
    <div v-else>
      <default-none :text="'暂无相关报价'"></default-none>
    </div>
  </div>
</template>

<script>
import { BaoJiaLiteapp } from '@/api/api'
import defaultNone from '@/components/defaultNone'
export default {
  data () {
    return {
      groupingData: null,
      isDisable: true
    }
  },
  components: {
    defaultNone
  },
  computed: {
    store () {
      return this.$store.state
    }
  },
  onShow () {
    this.isDisable = true
    this.$wx.getStore('shoppingCart', 'DELETE')
    this.$wx.getStore('bzGoods', 'DELETE')
    this.$wx.getStore('confirmOrder', 'DELETE')
    this.getBaoJiaLiteapp()
  },
  methods: {
    selectCheck (item, items) {
      let groupingData = this.groupingData

      // 当前表格选中全选 else 单行点击
      if (items === '-1') {
        item.isSelect = !item.isSelect
      } else {
        // 空白商品不选择
        if (!items.HuoHao && !items.SPMingcheng) { return }
        items.isSelect = !items.isSelect
      }
      let isDisable = true
      for (let key of groupingData) {
        // 清除非当前的表格下选中的
        let status = 0
        if (key.title.KH_ID !== item.title.KH_ID) {
          key.isSelect = false
          status = 2
        } else if (items === '-1') {
          status = 1
        }
        // 记录勾选状态数量
        let trueCounts = 0
        // 记录数组长度
        let lenCounts = 0
        for (let keys of key.arr) {
          lenCounts += 1
          if (!keys.HuoHao && !keys.SPMingcheng) { continue }
          if (status === 1) {
            keys.isSelect = item.isSelect
          } else if (status === 2) {
            keys.isSelect = false
          }
          (keys.isSelect === true) && (trueCounts += 1) && (isDisable = false)
          // 判断是否自动勾选全选或者取消状态

          if (trueCounts === key.arr.length) {
            key.isSelect = true
          } else if (lenCounts === key.arr.length) {
            key.isSelect = false
          }
        }
      }
      this.isDisable = isDisable
    },
    async getBaoJiaLiteapp () {
      let res = await BaoJiaLiteapp()
      // 遍历查询找出想同ID
      let keysObj = {}
      for (let key of res) {
        key.isSelect = false
        if (keysObj[key.KH_ID]) {
          keysObj[key.KH_ID].arr.push(key)
        } else {
          keysObj[key.KH_ID] = {
            title: key,
            arr: [key],
            isSelect: false
          }
        }
      }

      // 根据key区分数组
      let groupingData = []
      for (let key in keysObj) {
        groupingData.push(keysObj[key])
      }
      this.groupingData = groupingData
    },
    goShoppingCart () {
      if (!this.isDisable) {
        this.saveGoods()
        this.$wx.navigator('/pages/chooseAnOffer/listOfGoods')
      }
    },
    saveGoods () {
      if (this.isDisable) { return false }
      if (!this.store.userInfo.nickName) {
        this.$wx.showModal('授权', '在首页授权成功方可下单', () => {
          this.$wx.switchTab('/pages/home/index')
        })
        return false
      }
      let groupingData = this.groupingData
      let parame = {
        title: null,
        arr: [],
        isSelect: true
      }
      for (let key of groupingData) {
        for (let keys of key.arr) {
          if (keys.isSelect) {
            keys.number = 1
            keys.settleStyle = '付款'
            parame.title = keys
            parame.arr.push(keys)
          }
        }
      }
      this.$wx.getStore('shoppingCart', [parame])
    },
    goBZGoods (item) {
      this.saveGoods()
      let shoppingCart = this.$wx.getStore('shoppingCart')
      if (!shoppingCart) {
        let shoppingArr = [
          {
            title: item.title,
            arr: [],
            isSelect: true
          }
        ]
        this.$wx.getStore('shoppingCart', shoppingArr)
      }
      this.$wx.navigator('/pages/chooseAnOffer/bzGoods?typeId=' + item.title.KH_LeiXing_ID)
    }
  }
}
</script>
<style lang='scss' scoped>
@import '@/common/scss/base.scss';
.offer {
  background: #fff;
  padding: 0 30px;
  .content {
    padding-bottom: 94px;
  }
  table {
    padding-bottom: 40px;
    .card-num {
      height: 80px;
      @include fjc;
      > div:first-child {
        @include fontSize(28);
      }
      div:nth-child(2) {
        color: $primaryColor;
        @include fontSize(26);
        @include fjc(center);
      }
    }
    thead {
      @include border-top(#b5b4b5);
      tr {
        @include fjc(flex-start);
        background: #e5e4e5;
        th {
          @include fjc(center);
          justify-content: center !important;
          @include fontSize(28);
          color: #222;
          height: 80px;
        }
      }
    }
    tbody {
      tr {
        @include fjc(flex-start);
        background: #f8f8f7;
        td {
          @include color666;
          @include fjc(center);
          @include fontSize(28);
          min-height: 80px;
        }

        .assemble:after {
          border-bottom: none !important;
        }
        .assemble-num {
          position: absolute !important;
          right: 0;
          bottom: 0;
          width: 156px;
          @include fjc(center);
          &:after {
            border: none !important;
          }
        }
      }
    }
    thead tr,
    tbody tr {
      @include border-left(#b5b4b5);
      @include border-right(#b5b4b5);
      @include border-bottom(#b5b4b5);
      th,
      td {
        box-sizing: border-box;
      }
      > th:first-child,
      td:first-child {
        min-width: 62px;
      }
      > th:nth-child(2),
      td:nth-child(2) {
        max-width: 472px;
        min-width: 472px;
        padding: 0 10px;
        box-sizing: border-box;
        vertical-align: top;
        @include border-left(#b5b4b5);
        @include border-right(#b5b4b5);
        @include fjc(flex-start);
        flex-flow: row wrap;
        > div {
          width: 492px;
        }
      }
      > th:nth-child(3),
      th:nth-child(4),
      td:nth-child(3),
      td:nth-child(4) {
        min-width: 156px;
      }
    }
    .explain {
      text-align: right;
      padding-top: 25px;
      @include fontSize(24);
      @include color666;
    }
  }
}
.to-buy {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  background: #fff;
  justify-content: flex-end;
  z-index: 13;
  > div {
    background: $primaryColor;
    color: #fff;
    @include wh(216, 84);
    @include fjc(center);
    @include fontSize(30);
  }
  > .disable {
    background: #ccc;
  }
}
</style>